<template>
    <div>
      <table border="1" style="text-align: center">
        <tr>
          <th>序号</th>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>购买数量</th>
          <th>购买总价</th>
          <th>操作</th>
        </tr>
        <tr v-for=" i in all">
          <td>{{i.id}}</td>
          <td>{{i.title}}</td>
          <td>{{i.price}}</td>
          <td><span @click='i.num>0?i.num--:0'><button>-</button></span>{{i.num}}<span @click='i.num<10?i.num++:10'><button>+</button></span></td>
          <td>{{i.price*i.num}}</td>
          <td><a href="javascript:" class="btn btn-primary" @click="del(i.id)">删除</a></td>

        </tr>
        <p>总价：{{total_price}} 元</p>
      </table>
    </div>
</template>

<script>
    export default {
        name: "zuoye",
      data(){
          return{
            all:[{id:1,title:'iphone8',price:5099,num:0,selected:true},
              {id:2,title:'iphone xs',price:8699,num:0,selected:true},
              {id:3,title:'iphone xr',price:6499,num:0,selected:true}
              ],
            totalprice:''
          }
      },
      methods:{
          //删除
          del(id){
            var index=this.all.some((i,a)=>{
              if (i.id==a){
                return true;
              }
            });
            this.all.splice(index,1);
          }
      },
      //计算总价
      computed:{
        'total_price':function () {
          this.totalprice=0;
          for (var a=0;a<this.all.length;a++){
            // if (this.all[a].selected){
              this.totalprice += this.all[a].price*this.all[a].num;
            // }
          }

          return this.totalprice;

        }
      }

    }
</script>

<style scoped>

</style>
